<template>
  <!-- 我的消息 -->
  <el-container>
    <el-header class="header-tabs">
      <el-tabs v-model="activeName" type="card" @tab-change="handleTabClick">
        <el-tab-pane label="未读" name="0"></el-tab-pane>
        <el-tab-pane label="已读" name="1"></el-tab-pane>
      </el-tabs>
    </el-header>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" @click="changeNewsStatus"
          >标记为已读</el-button
        >
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        :params="params"
        row-key="id"
        stripe
        @selection-change="selectionChange"
        @filterType="filterType"
        @row-dblclick="handleRowClick"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="ID" prop="id" width="80"></el-table-column>
        <el-table-column
          label="主题"
          prop="title"
          min-width="250"
        ></el-table-column>
        <el-table-column
          label="时间"
          prop="createTime"
          width="300"
        ></el-table-column>
      </scTable>
    </el-main>
  </el-container>
</template>
<script>
import { queryTypeByDic } from '@/utils/getData'
import { clickNews } from '@/utils/handleRouter'
export default {
  name: 'myNews',
  data () {
    return {
      apiObj: this.$API.home.myNews.getMyNewsList,
      params: { status: 0 },
      activeName: '0',
      selection: [],
      noticeType: [],//通知类型
    }
  },
  mounted () {
    this.getType()
  },
  methods: {
    async getType () {
      this.noticeType = await queryTypeByDic('noticeCode')
    },

    filterType (data) {
      let tableData = data || []
      tableData.forEach(item => {
        this.noticeType.map(n_item => {
          if (item.type == n_item.value) {
            item.title = `【${n_item.name}】 ${item.title}`
          }
        })

      })

    },
    // 切换tab
    handleTabClick (val) {
      this.params.status = val
      this.$refs.table.refresh()
    },

    //表格选择后回调事件
    selectionChange (selection) {
      this.selection = selection

    },
    // 修改消息为已读
    async changeNewsStatus () {
      let list = []
      this.selection.map(item => {
        list.push(item.id)
      })
      let ids = list.join(',')
      let res = await this.$API.home.myNews.changeNewsStatus.post({ id: ids })
      console.log(res)
      if (res.code == 200) {
        this.$refs.table.refresh()
        this.$message.success("操作成功")
      }

    },
    handleRowClick (row) {
      clickNews(row)
    },

  }
}
</script>

<style>
</style>